<template>
    <div style="background: #f2f2f2;">
        <div class="header"><img src="../../images/left.png" alt="" @click="$router.back(-1)">任务详情</div>
        <!--header-->
        <div class="endClock">
            <p id="status_text" v-html="time"></p>

        </div>

        <div class="workinter">
            <p v-if="remark" class="remark" style="background:#FFF8C4;text-align: center">拒绝理由：{{ remark }}</p>
            <!--任务详情-->
            <div class="works_List">
                <div class="Numeset">
                    <div class="workNumts">
                        <p>任务编号：
                            <span id="ticketNum">{{ task.work.work_no }}</span>
                        </p>
                    </div>
                    <div class="copyes" v-if="task.work.work_no">
                        <button class="btncopys" data-clipboard-target="#ticketNum" v-clipboard="task.work.work_no"
                                @success="handleSuccess" @error="handleError">
                            复制
                        </button>
                    </div>
                </div>
                <div class="clearfix scenred">
                    <div class="goodLogo">
                        <img :src="img" class="listImgs fl" @click="swiperIMG()" v-if="img"/>
                        <p>共{{ task.job.type.val == 3 ? get(task,'job.images.length')-1 : get(task,'job.images.length')
                            }}张</p>
                    </div>
                    <div class="fl listTextDev">
                        <h3 @click="titleMessage(task.job.job_title)">{{ task.job.job_title }}</h3>
                        <p v-if="task.job.price">商品展示价格 <span>{{ task.job.price.replace(/\d\./, '*.') }}</span></p>
                        <div class="clearfix moneyset">
                            <div class="fl" style="margin-right: 0.57rem;">
                                <span style="color:#FDB549;font-weight: 600;">￥{{ task.work.user_money }}</span>
                            </div>
                            <div class="fl" style="margin-left: 0.57rem;">
                                <img src="../../images/privilege-jifen.png"/>
                                <span v-if="task.job.sort == '1000000000'">{{ finish_work_credit }}</span>
                                <span v-else>{{ credit_multiple }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="custom">
                <ul v-if="task.job">
                    <li v-if="task.job.type.text">
                        <h3><img src="../../images/dilIcon.png" class="dilIcon"/>任务类型 <span class="fr"
                                                                                            v-clipboard="task.job.type.text"
                                                                                            @success="handleSuccess"
                                                                                            @error="handleError">复制</span>
                        </h3>
                        <p>{{ task.job.type.text }}</p>
                    </li>
                    <li v-if="task.job.job_title">
                        <h3><img src="../../images/dilIcon.png" class="dilIcon"/>任务标题 <span class="fr"
                                                                                            v-clipboard="task.job.job_title"
                                                                                            @success="handleSuccess"
                                                                                            @error="handleError">复制</span>
                        </h3>
                        <p>{{ task.job.job_title }}</p>
                    </li>
                    <li v-if="task.job.job_desc">
                        <h3><img src="../../images/dilIcon.png" class="dilIcon"/>任务描述 <span class="fr"
                                                                                            v-clipboard="task.job.job_desc"
                                                                                            @success="handleSuccess"
                                                                                            @error="handleError">复制</span>
                        </h3>
                        <p>{{ task.job.job_desc }}</p>
                    </li>
                    <li v-if="task.job.job_link">
                        <h3><img src="../../images/dilIcon.png" class="dilIcon"/>任务链接 <span class="fr"
                                                                                            v-clipboard=" task.job.job_link"
                                                                                            @success="handleSuccess"
                                                                                            @error="handleError">复制</span>
                        </h3>
                        <p>{{ task.job.job_link }}</p>
                    </li>
                </ul>
            </div>
            <div class="custom" id="custom-img">
                <ul>
                    <li v-for="(taskImg, index) in task.job.job_step">
                        <h3 v-if="taskImg.desc"><img src="../../images/dilIcon.png" class="dilIcon"/>任务步骤{{ index+1 }}<span class="fr"
                                                                                                        v-clipboard="taskImg.desc"
                                                                                                        @success="handleSuccess"
                                                                                                        @error="handleError">复制</span>
                        </h3>
                        <p>{{ taskImg.desc }}</p>
                        <ul class="custom-img-up">
                            <li @click="exampleUrl = qiniu_domain_url + taskImg.image">
                                <img :src="taskImg.image" v-if="taskImg.image.indexOf('http') != -1"/>
                                <img :src="qiniu_domain_url + taskImg.image" v-else/>
                                <span>点击查看示例</span>
                            </li>
                            <li v-if='task.work.status.val == 1 || task.work.status.val == 6 || task.work.status.val == 5'>
                                <img v-if="taskImg.screenshot_url" :src="taskImg.screenshot_url" class="JoinImgsLogo"/>
                                <img src="../../images/336.png" class="JoinImgsLogo" v-else/>
                                <input type="file" @change="file" accept="image/*" :inx="index" multiple="multiple"/>    <!-- :accept="accepts" -->
                                <span>任务步骤{{ index + 1 }}截图</span>
                            </li>
                            <li v-else @click="exampleUrl = taskImg.screenshot_url">
                                <img v-if="taskImg.screenshot_url" :src="taskImg.screenshot_url" class="JoinImgsLogo"/>
                                <img src="../../images/336.png" class="JoinImgsLogo" v-else/>
                                <span>任务步骤{{ index + 1 }}截图</span>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!-- 特殊要求 -->
            <!--<div id="tsyqBody" v-if="modalshow">-->
            <!--<div class="head">-->
            <!--<h3>特殊要求</h3>-->
            <!--<p>请认真阅读特殊要求，并按要求做任务</p>-->
            <!--</div>-->
            <!--<div class="content">-->
            <!--{{ get(task,'job.reward.job_meta_value') }}-->
            <!--</div>-->
            <!--</div>-->
            <div class="modalzz" v-if="modalshow || swiperImg || exampleUrl"
                 @click="modalshow = false; swiperImg = false; exampleUrl = false"><img src="../../images/close.png"
                                                                                        alt=""
                                                                                        @click="modalshow = false;swiperImg = false;exampleUrl = false">
            </div>
            <!--<img src="../../images/tsyq.gif" alt="" class="tsyq" @click="modalshow = true"-->
            <!--v-if="get(task,'job_meta.job_meta_key')">-->


            <!--提交截图-->
            <!--<div class="printscreen">-->
            <!--<h3><img src="../../images/dilIcon.png" class="dilIcon"/>提交截图</h3>-->
            <!--<div class="specialNeedsImg">-->
            <!--&lt;!&ndash;<div class="fl">&ndash;&gt;-->
            <!--&lt;!&ndash;<img src="../../images/000.png" style="margin-right: .1rem"/>&ndash;&gt;-->
            <!--&lt;!&ndash;<span>示例截图</span>&ndash;&gt;-->
            <!--&lt;!&ndash;</div>&ndash;&gt;-->
            <!--&lt;!&ndash;<div class="copyes" style="position: absolute;left: 3rem;">&ndash;&gt;-->
            <!--&lt;!&ndash;<a href="https://wb.woyaorenqi.cn/app_html/example_images.html">&ndash;&gt;-->
            <!--&lt;!&ndash;<button>所有示例</button>&ndash;&gt;-->
            <!--&lt;!&ndash;</a>&ndash;&gt;-->
            <!--&lt;!&ndash;</div>&ndash;&gt;-->
            <!--&lt;!&ndash;<div class="fr copyes">&ndash;&gt;-->
            <!--&lt;!&ndash;<a :href="task.guifan">&ndash;&gt;-->
            <!--&lt;!&ndash;<button>规范</button>&ndash;&gt;-->
            <!--&lt;!&ndash;</a>&ndash;&gt;-->
            <!--&lt;!&ndash;</div>&ndash;&gt;-->
            <!--</div>-->
            <!--<ul class="noticeander">-->
            <!--<li>-->
            <!--<img src="../../images/569.png"/>-->
            <!--<span>请在任务过期前提交任务</span>-->
            <!--</li>-->
            <!--<li>-->
            <!--<img src="../../images/569.png"/>-->
            <!--<span>注意：示例样图仅供参考</span>-->
            <!--</li>-->
            <!--<li v-if="task.consumer">-->
            <!--<img src="../../images/569.png"/>-->
            <!--<span>请确保使用<span v-if="cross">【{{ task.consumer }}】</span>-->
            <!--<span v-else>【{{ task.consumer.login }}】</span>执行任务</span>-->
            <!--</li>-->
            <!--</ul>-->
            <!--<div class="Inphotts clearfix">-->
            <!--<div class="Joinglist clearfix">-->
            <!--<div class="Imgphoto fl" v-for="(origin,index) in task.work.items.origin"-->
            <!--v-if="origin.job_option_group == 1">-->
            <!--<div class="Imgphotos">-->
            <!--&lt;!&ndash; status 为 1 时为可传图片状态 &ndash;&gt;-->
            <!--<div class="JoinImgs"-->
            <!--v-if="task.work.status.val == 1 || task.work.status.val == 5 || task.work.status.val == 6">-->
            <!--<div v-if="task.work.status.val != 5 && task.work.status.val != 6">-->
            <!--<img v-if="origin.uploadedImg" :src="origin.uploadedImg"-->
            <!--:id="'jobImg' + origin.job_option_id"-->
            <!--class="JoinImgsLogo"/>-->
            <!--<img v-else src="../../images/336.png" :id="'jobImg' + origin.job_option_id"-->
            <!--class="JoinImgsLogo"/>-->
            <!--<input type="file" @change="file" :accept="accepts" :id="origin.job_option_id"-->
            <!--inx="1"/>-->

            <!--</div>-->
            <!--<div v-else>-->
            <!--<div v-for='imgss in task.work.work_images'-->
            <!--v-if="imgss.job_option_id == origin.job_option_id">-->
            <!--<img class="JoinImgsLogo" :id="'jobImg' + origin.job_option_id"-->
            <!--:src="imgss.job_option_id == origin.job_option_id ? imgss.screenshot_url : ''"-->
            <!--alt="">-->
            <!--<input type="file" @change="file" :accept="accepts"-->
            <!--:id="origin.job_option_id"-->
            <!--inx="1"/>-->
            <!--</div>-->
            <!--</div>-->

            <!--</div>-->
            <!--<div class="JoinImgs" v-else>-->
            <!--<img class="JoinImgsLogo"-->
            <!--v-for='imgss in task.work.work_images'-->
            <!--v-if="imgss.job_option_id == origin.job_option_id"-->
            <!--:src="imgss.job_option_id == origin.job_option_id ? imgss.screenshot_url : ''"-->
            <!--alt="" @click="exampleUrl = imgss.screenshot_url">-->
            <!--</div>-->
            <!--<p class="imgType">{{ origin.job_option_name }}</p>-->
            <!--</div>-->
            <!--<p class="lookImgs" :data-src=" qiniu_domain_url + origin.job_example_img"-->
            <!--@click="exampleUrl = qiniu_domain_url + origin.job_example_img"><span>查看样图</span></p>-->
            <!--</div>-->
            <!--</div>-->
            <!--</div>-->
            <!--<div class="importantInfor">-->
            <!--<ul>-->
            <!--&lt;!&ndash;<li v-if="model" style="line-height: .6rem"><span class="rTime_red"&ndash;&gt;-->
            <!--&lt;!&ndash;v-if="rTime">{{ rTime }}秒</span>倒计时结束后，才可以开始做其他任务截图上传&ndash;&gt;-->
            <!--&lt;!&ndash;<br/>倒计时期间请在宝贝详情页继续深度浏览对应宝贝。&ndash;&gt;-->
            <!--&lt;!&ndash;</li>&ndash;&gt;-->
            <!--<li class='ask_everyone' v-if="task.ask_everyone">-->
            <!--<p>注意：请复制以下摸板，进行提问，并提交【问大家截图】否则无法通过审核</p>-->
            <!--<div class="ask_everyone_btn copyes clearfix">-->
            <!--<p>{{ task.ask_everyone }}</p>-->
            <!--<button v-clipboard="task.ask_everyone" @success="handleSuccess" @error="handleError">-->
            <!--复制-->
            <!--</button>-->
            <!--</div>-->
            <!--</li>-->
            <!--<li id="depth" v-if="task.question">-->
            <!--<p class="text-red">找到商品后在商品详情页面从上至下缓缓浏览 并且在详情页中 根据以下提示找到问题答案：</p>-->
            <!--<div class="answers">-->
            <!--<div class="depth-answers-flex"><h4>文字提示</h4><span class="text-red">{{ task.question.title }}</span>-->
            <!--</div>-->
            <!--<div class="depth-answers-flex1"><h4>图片提示</h4><img :src="task.question.img" alt=""-->
            <!--width="100%"-->
            <!--@click="exampleUrl = task.question.img">-->
            <!--</div>-->
            <!--</div>-->
            <!--<p style="margin-top: .5rem;">答案字数<span-->
            <!--class="text-red"> {{ task.question.answer_num }}个字</span></p>-->
            <!--<div id="depth-input">-->
            <!--<input type="text" v-model="answer" :placeholder="holder_answer">-->
            <!--<button class="sucs-button"-->
            <!--@click="answers(task.question.question_id, answer, task.work.work_id)">验证-->
            <!--</button>-->
            <!--<div class="copyes fr">-->
            <!--<button class="text-blue" @click="exampleUrl = task.search_answer"-->
            <!--style="padding: 0.07rem 0.1rem;height: 1rem;color:#000;margin-top: 0.05rem">-->
            <!--如何找答案-->
            <!--</button>-->
            <!--</div>-->
            <!--</div>-->
            <!--</li>-->
            <!--</ul>-->
            <!--</div>-->
            <!--&lt;!&ndash;上传截图&ndash;&gt;-->
            <!--<div class="Inphotts clearfix">-->
            <!--<div class="Joinglist PutPhoto clearfix">-->
            <!--<div class="Imgphoto fl" v-for="(origin,index) in task.work.items.origin"-->
            <!--v-if="origin.job_option_group == 2">-->
            <!--<div class="Imgphotos">-->
            <!--&lt;!&ndash;<div class="JoinImgs" @click="file($event, 2, origin.job_option_id)"&ndash;&gt;-->
            <!--&lt;!&ndash;v-if="task.work.status.val == 1 || task.work.status.val == 5">&ndash;&gt;-->
            <!--&lt;!&ndash;<img src="../../images/336.png" :id="'jobImg' + origin.job_option_id"&ndash;&gt;-->
            <!--&lt;!&ndash;class="JoinImgsLogo" v-if="task.work.status.val != 5"/>&ndash;&gt;-->
            <!--&lt;!&ndash;<img class="JoinImgsLogo" :id="'jobImg' + origin.job_option_id" v-else&ndash;&gt;-->
            <!--&lt;!&ndash;:src="task.work.work_images[index].job_option_id ==  origin.job_option_id ? task.work.work_images[index].screenshot_url : ''"&ndash;&gt;-->
            <!--&lt;!&ndash;alt="">&ndash;&gt;-->
            <!--&lt;!&ndash;</div>&ndash;&gt;-->
            <!--<div class="JoinImgs"-->
            <!--v-if="task.work.status.val == 1 || task.work.status.val == 5 || task.work.status.val == 6">-->
            <!--<div v-if="task.work.status.val != 5 && task.work.status.val != 6">-->
            <!--<img v-if="origin.uploadedImg" :src="origin.uploadedImg"-->
            <!--:id="'jobImg' + origin.job_option_id"-->
            <!--class="JoinImgsLogo"/>-->
            <!--<img v-else src="../../images/336.png" :id="'jobImg' + origin.job_option_id"-->
            <!--class="JoinImgsLogo"/>-->
            <!--<input type="file" @change="file" :accept="accepts" :id="origin.job_option_id"-->
            <!--inx="2"/>-->
            <!--</div>-->
            <!--<div v-else>-->
            <!--<div v-for='imgss in task.work.work_images'-->
            <!--v-if="imgss.job_option_id == origin.job_option_id">-->
            <!--<img class="JoinImgsLogo" :id="'jobImg' + origin.job_option_id"-->
            <!--:src="imgss.job_option_id == origin.job_option_id ? imgss.screenshot_url : ''"-->
            <!--alt="">-->
            <!--<input type="file" @change="file" :accept="accepts"-->
            <!--:id="origin.job_option_id"-->
            <!--inx="2"/>-->
            <!--</div>-->
            <!--</div>-->
            <!--</div>-->
            <!--<div class="JoinImgs" v-else>-->
            <!--<img class="JoinImgsLogo"-->
            <!--v-for='imgss in task.work.work_images'-->
            <!--v-if="imgss.job_option_id == origin.job_option_id"-->
            <!--:src="imgss.job_option_id == origin.job_option_id ? imgss.screenshot_url : ''"-->
            <!--alt="" @click="exampleUrl = imgss.screenshot_url">-->
            <!--</div>-->
            <!--<p class="imgType">{{ origin.job_option_name }}</p>-->

            <!--</div>-->
            <!--<p class="lookImgs" :data-src="qiniu_domain_url + origin.job_example_img"-->
            <!--@click="exampleUrl = qiniu_domain_url + origin.job_example_img"><span>查看样图</span></p>-->
            <!--</div>-->
            <!--<div id="Joinglist_model" v-if="task.work.status.val == 1 && model"-->
            <!--@click="$toast('深度浏览倒计时中请继续浏览对应宝贝')"></div>-->
            <!--</div>-->
            <!--</div>-->
            <!--</div>-->
            <div>
                <div class="">
                    <p v-if="remark" class="remark" style="background:#FFF8C4;">拒绝理由：{{ remark }}</p>
                    <div v-if="task.work_apply"><p class="remark" style="background:#A5D1FE;">介入理由：{{
                        task.work_apply.content }}</p></div>
                    <p v-if="work_apply" class="remark" style="background:#FFAEAD;">平台介入反馈：{{ work_apply }}</p>
                </div>

                <button class="putwork" v-on:click="submit()" :disabled="model" :class="{huise: model}"><i>提交任务</i>
                    <p v-html="time"></p></button>
                <button class="putwork" @click="reasonShow = true"
                        v-if="task.work.status.val == 1 || task.work.status.val == 5"><i>放弃任务</i></button>
                <button class="putwork" @click="apply = true" v-if="again_number && task.work.status.val == 5">
                    <i>申请平台介入</i></button>
            </div>
        </div>

        <!--提交任务-->

        <!--<div id="detailZZ" v-if="task.work.status.val != 1 && task.work.status.val != 5"></div>-->
        <!-- 轮播 -->
        <div v-if="swiperImg" class="detailBanImg">
            <div class="banner_head">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" style="width:100%;" v-for="img in get(task,'job.images')"
                             v-if="img.type != 4">
                            <a><img :src="img.url" v-if="img.url.indexOf('http') != -1"/>
                                <img :src="qiniu_domain_url + img.url" v-else/></a>
                        </div>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </div>
        <!-- 示例截图 -->
        <div id="exampleImg" v-if="exampleUrl">
            <div class="exampleImg">
                <img :src="exampleUrl" alt="">
            </div>
        </div>
        <!-- 注意事项 -->
        <!--<div class="specialNeeds" id="presenting" v-if="presenting && presentingTrue">-->
        <!--<h3>注意事项</h3>-->
        <!--<span class="specialNeeds_head">如未遵守以下几点并多次被投诉将封号</span>-->
        <!--<img src="../../images/presenting_close.png" alt="" class="fr" @click="presentingTrue = false">-->
        <!--<div class="tsxq">-->
        <!--<p>-->
        <!--1.确认使用<span>【{{ task.consumer.login }}】</span>任务号登录手机淘宝app，用错任务号将扣除佣金，并进行处罚<span>2金币</span>，多次被投诉将<span>封号</span>-->
        <!--</p>-->
        <!--<p>2.请务必核对店铺名称/客服<span>【{{ task.job.shop.hide_name }}】</span>，并对目标商品从上到下进行<span>至少2分钟浏览</span>-->
        <!--</p>-->
        <!--<p>3.加购物车至少保留<span>【7】</span>天，收藏商品，收藏店铺至少保留<span>【30】</span>天</p>-->
        <!--<p>4.【淘口令】任务的搜索截图请提交<span>淘口令弹窗截图</span></p>-->
        <!--</div>-->
        <!--</div>-->
        <!-- 放弃任务列表弹窗 -->
        <div id="reason" v-if="reasonShow">
            <ul>
                <li class="reasonTop">请选择原因</li>
                <li v-for="list in reasonList" @click="abortMission(list.text)">{{ list.text }}</li>
                <li class="reasonBottom" @click="reasonShow = false">取消</li>
            </ul>
        </div>
        <!-- 平台介入 -->
        <div id="apply" v-if="apply">
            <div class="applyBody">
                <h3>申请平台介入</h3>
                <!--<label for="">手机号</label><input type="text" placeholder="请填写手机号" >-->
                <!--<label for="">介入原因</label>-->
                <textarea v-model="applyText" placeholder="请填写需要介入的原因" contenteditable="true"></textarea>
                <div class="applyBodyBtn">
                    <button @click="apply = false">取消</button>
                    <button @click="applySuccess">提交</button>
                </div>
            </div>
        </div>
        <div class="fixed_color"></div>
    </div>
</template>

<script>
    import api from '../../utils/api';
    // import * as qiniu from 'qiniu-js';
    let OSS = require('ali-oss');
    import {GenNonDuplicateID} from '../../utils/config';
    import _ from 'lodash';
    import {MessageBox} from 'mint-ui';

    export default {
        name: 'Detail',
        props: {
            accepts: {
                type: String,
                default: 'image/jpeg,image/jpg,image/png,image/gif'
            },
            maxSize: {
                type: Number,
                default: 0
            }
        },
        data() {
            return {
                task: {
                    work: {
                        keyword: '',
                        items: '',
                        status: ''
                    },
                    job: {
                        goods: '',
                        type: '',
                        job_meta: '',
                        shop: '',
                    },
                    consumer: '',
                },
                img: '', //商品主图 只检索第一张
                screenshots: [], // 上传图片后 信息存储
                qiniu_domain_url: '',  //七牛主域名
                imginx: 0, // 上部分截图上传的 总长度 与 上传长度 匹配后计时
                imgleng: 0, // 上传长度
                // rTime: false, // 上传图片倒计时
                time: '', //输出计时
                flag: false, //判断是否计时结束
                endTime: '', // 结束时间,
                workImgLeng: '',
                consumer_id: false,
                modalshow: false,
                swiperImg: false,
                goodLogoLength: '',
                presenting: false,
                presentingTrue: true,
                exampleUrl: '',
                reason: '',
                reasonList: [{
                    text: '不想做了'
                }, {
                    text: '提交不了截图'
                }, {
                    text: '不知道怎么做任务'
                }, {
                    text: '关键词找不到商品'
                }, {
                    text: '任务信息异常'
                }, {
                    text: '其他'
                }],
                reasonShow: false,
                model: true,
                remark: false,
                again_number: false,
                apply: false,
                applyText: '',
                abortImg: [],
                work_apply: false,
                returnEntrance: false,
                parent_job: false,
                depth: false,
                answer: '',
                sendTime: false,
                holder_answer: false,
                credit_multiple: false, // 推荐积分
                finish_work_credit: false, // 积分
                cross: false, // 是否是跨平台
                copyData: 'copy data',
                oss_config: [],
            }
        },
        created() {
            this.previewOSS()
            this.credit_multiple = parseInt(localStorage.getItem('credit_multiple'));
            this.finish_work_credit = parseInt(localStorage.getItem('finish_work_credit'));
            var sUserAgent = window.navigator.userAgent.toLowerCase();
            // if(this.is_weixn_qq().indexOf('QQ') != -1){
            //     alert('qq内置浏览器暂不支持上传图片 请点击右上角选择系统默认浏览器打开')
            // }

            // this.cross = this.$route.query.cross;
        },
        methods: {
            is_weixn_qq() {
                var ua = navigator.userAgent.toLowerCase();
                if (ua.match(/MicroMessenger/i) == "micromessenger") {
                    return "weixin";
                } else if (ua.match(/QQ/i) == "qq") {
                    return "QQ";
                }
                return false;
            },
            get(object, path, defaultValue) {
                return _.get(...arguments);
            },
            // 调起接口获取任务详情数据
            async setData(type = 0) {
                var url = '/works/show'
                if (this.cross) {
                    url = '/cross_platform/work'
                }
                let resp = await api.request(url, 'get', {work_user_id: this.$route.params.id})
                var _that = this;
                // 图片提交后 等待时间
                // this.rTime = resp.data.data.job.job_limit.browsing_time * 60
                // 检索是否提交过任务
                if (localStorage.getItem('depth_work_id') && resp.data.data.work.status.val == 1) {
                    if (localStorage.getItem('depth_work_id') == resp.data.data.work.work_id) {
                        this.answer = localStorage.getItem('depth_text')
                        // this.depth = true;
                    }
                }
                if (localStorage.getItem('work_id') == resp.data.data.work_id && resp.data.data.work.status.val == 1) {
                    resp.data.data.job.job_step = JSON.parse(localStorage.getItem('job_step'))
                }
                if (resp.data.data.work.work_images) {
                    for (let img in resp.data.data.work.work_images) {
                        this.$set(resp.data.data.job.job_step[img], 'screenshot_url', resp.data.data.work.work_images[img].screenshot_url)
                        this.$set(resp.data.data.job.job_step[img], 'create_time', Date.parse(new Date(resp.data.data.work.work_images[img].create_time)) / 1000)
                        this.$set(resp.data.data.job.job_step[img], 'work_image_id', resp.data.data.work.work_images[img].work_image_id)
                    }
                }
                if (resp.data.data.work.status.val == 1 || resp.data.data.work.status.val == 6 || resp.data.data.work.status.val == 5) {
                    this.model = false
                }
                _that.task = resp.data.data;

                // 加载问题答案
                if (resp.data.data.work.status.val != 1 && _that.task.question) {
                    _that.answer = _that.task.question.answer;
                } else {
                    if (_that.task.question) {
                        if (_that.task.question.answer.length >= 3) {
                            _that.holder_answer = _that.task.question.answer;
                        }
                    }
                }
                // 如果为拒绝任务，则没有图片提交限制
                if (_that.task.work.status.val == 5 || _that.task.work.status.val == 6) {
                    // this.rTime = 0;
                    this.depth = true
                }
                let returnzj = [];
                returnzj[1] = '足迹进入';
                returnzj[2] = '收藏进入';
                returnzj[3] = '加购进入';
                returnzj[4] = '猜你喜欢';
                // 回访任务入口
                if (_that.task.job.return_entrance) {
                    _that.returnEntrance = returnzj[_that.task.job.return_entrance.job_meta_value];
                }
                if (_that.task.job.parent_job) {
                    _that.parent_job = _that.task.job.parent_job.p_type.text
                }
                console.log(_that.task.consumer_id)
                this.consumer_id = _that.task.consumer_id;
                // 平台介入
                if (_that.task.again_number) {
                    _that.again_number = _that.task.again_number.meta_value;
                } else {
                    _that.again_number = false;
                }
                if (_that.task.work_apply) {
                    _that.work_apply = _that.task.work_apply.remark
                }

                _that.qiniu_domain_url = 'https://wyrq-2.oss-cn-shanghai.aliyuncs.com/'
                if (_that.task.job.images[0].url.indexOf('http') != -1) {
                    _that.img = _that.task.job.images[0].url;
                } else {
                    _that.img = _that.qiniu_domain_url + _that.task.job.images[0].url
                }
                // if (_that.task.work.status.val != 1 && _that.task.work.status.val != 5) {
                //     return false;
                // }

                // meta数据 （拒绝理由等）

                for (let i in _that.task.work.work_meta) {
                    // if(!this.cross){
                    if (_that.task.work.work_meta[i].meta_key == 'expire_time') {
                        // _that.endTime = _that.getLocalTime(_that.task.work.work_meta[i].meta_value)
                        _that.endTime = _that.task.work.work_meta[i].meta_value
                    }
                    if (_that.task.work.work_meta[i].meta_key == 'remark') {
                        _that.remark = _that.task.work.work_meta[i].meta_value
                    }
                }
                // if (this.task.work.status.val == 1 || this.task.work.status.val == 5) {
                //     _that.endTime = _that.getLocalTime(this.task.expire_time);
                // }
                for (let i in _that.task.work.items.origin) {
                    if (_that.task.work.items.origin[i].job_option_group == 1) {
                        _that.imgleng++
                    }
                    _that.workImgLeng++
                }
                this.$nextTick(() => {
                    let time = setInterval(() => {
                        if (this.task.work.status.val != 1 && (this.task.work.status.val != 5 || this.task.work.status.val != 6)) {
                            this.time = this.task.work.status.text
                            // document.getElementBy('status_text').innerHTML = this.task.work.status.text
                            clearInterval(time)
                            return false;
                        }
                        if (this.flag == true) {
                            clearInterval(time)
                        }
                        this.timeDown()
                    }, 500)
                })
            },
            // 上传图片到七牛云
            async file(event) {
                var _that = this;
                let job_option_id = 0
                var job_inx = event.target.getAttribute('inx');

                let file = event.target.files[0];
                let client = new OSS(_that.oss_config);
                try {
                    let result = await client.put(GenNonDuplicateID(32), file);
                    _that.$set(_that.task.job.job_step[job_inx], 'screenshot_url', result.url)
                    _that.$set(_that.task.job.job_step[job_inx], 'create_time', Date.parse(new Date()) / 1000)
                    localStorage.setItem('job_step', JSON.stringify(_that.task.job.job_step))
                    localStorage.setItem('work_id', _that.task.work_id)
                } catch (e) {
                    console.log(e);
                }

            },
            async previewOSS(name, file) {
                let resp = await api.request('/oss_config', 'get', {})
                let data = resp.data.data;
                let par = {
                    region: 'oss-cn-shanghai',
                    accessKeyId: data.accessKeyId,
                    accessKeySecret: data.accessKeySecret,
                    bucket: data.bucket
                }
                this.oss_config = par
            },
            // // 上传图片倒计时
            // send() {
            //     let that = this;
            //     let rTime = that.rTime;
            //     let interval = window.setInterval(() => {
            //         if (--that.rTime <= 0) {
            //             that.rTime = 0;
            //             this.model = false
            //             window.clearInterval(interval);
            //         }
            //         localStorage.setItem('sendTime', that.rTime)
            //     }, 1000);
            // },
            // 任务结束时间倒计时
            timeDown() {
                // const endTime = new Date(this.endTime)
                // const nowTime = new Date();
                let leftTime = parseInt(this.endTime - (Date.parse(new Date()) / 1000))
                let d = parseInt(leftTime / (24 * 60 * 60))
                let h = this.formate(parseInt(leftTime / (60 * 60) % 24))
                let m = this.formate(parseInt(leftTime / 60 % 60))
                let s = this.formate(parseInt(leftTime % 60))

                let ds = '';
                let hs = '';
                let ms = '';
                if (leftTime <= 0) {
                    this.flag = true;
                    this.time = '任务已结束';
                    this.model = true;
                    return false;
                }

                // d != 0 ? time += d + '天' : '';
                // h != 0 ? time += h + '小时' : '';
                // m != 0 ? time += m + '分' : '';
                // this.time = '任务过期时间：' + time + s + '秒'

                if (d != 0) {
                    d = '<span>' + d + '</span>';
                    ds = ':'
                } else {
                    d = ''
                }
                if (h != 0) {
                    h = '<span>' + h + '</span>';
                    hs = ':'
                } else {
                    h = ''
                }
                if (m != 0) {
                    m = '<span>' + m + '</span>'
                    ms = ':'
                } else {
                    m = ''
                }
                this.time = '<em>任务过期时间：</em>' + d + ds + h + hs + m + ms + '<span>' + s + '</span>'
            },
            formate(time) {
                if (time >= 10) {
                    return time
                } else {
                    return `0${time}`
                }
            },
            // 时间戳转换
            getLocalTime(nS) {
                let str = new Date(parseInt(nS) * 1000).toLocaleString('chinese', {hour12: false})
                return str.split('/').join('-');
            },
            // 提交任务
            async submit() {
                console.log(this.consumer_id)
                if (!this.depth && this.task.question) {
                    this.$toast('请先点击验证深度浏览答案');
                    return false;
                }
                var screenshots = [];
                for (let i in this.task.job.job_step) {
                    if (this.task.job.job_step[i].work_image_id) {
                        screenshots.push({
                            work_image_id: this.task.job.job_step[i].work_image_id,
                            screenshot_url: this.task.job.job_step[i].screenshot_url,
                            create_time: this.task.job.job_step[i].create_time,
                            job_option_id: 0
                        })
                    } else {
                        if (this.task.job.job_step[i].screenshot_url) {
                            screenshots.push({
                                screenshot_url: this.task.job.job_step[i].screenshot_url,
                                create_time: this.task.job.job_step[i].create_time,
                                job_option_id: 0
                            })
                        }
                    }
                }
                try {
                    if (this.task.work.status.val != 5 && this.task.work.status.val != 6) {
                        if (screenshots.length != this.task.job.job_step.length) {
                            this.$toast('图片未上传完整！');
                            return false;
                        }
                    }


                    let param = {
                        work_user_id: this.$route.params.id,
                        consumer_id: this.consumer_id,
                        work_images: JSON.stringify(screenshots)
                    }
                    var url = '/works/store';
                    if (this.cross) {
                        url = '/cross_platform/store'
                    }

                    let resp = await api.request(url, 'post', param);
                    if (resp.status == 201) {
                        await api.request('/workAuditNum', 'get', {}).then(function (res) {
                            localStorage.setItem("tbworkAuditNumber",res.data.data.taobao.num);
                            localStorage.setItem("jdworkAuditNumber",res.data.data.jingdong.num);
                            localStorage.setItem("pddworkAuditNumber",res.data.data.pingduoduo.num);
                        })
                        this.$toast('提交成功！');
                        this.$router.push({path: '/'})
                    }
                } catch (e) {
                }

            },
            swiperIMG() {
                this.swiperImg = true;
                setTimeout(function () {
                    var mySwiper = new Swiper('.swiper-container', {
                        loop: true,
                        autoplayDisableOnInteraction: false,
                        pagination: '.swiper-pagination',
                    })
                    if (mySwiper.slides.length <= 3) {
                        mySwiper.lockSwipes();
                    }
                }, 100)
            },
            async abortMission(reason) {
                this.reasonShow = false;
                let param = {
                    work_id: this.task.work_id,
                    reason: reason,
                    consumer_id: this.task.consumer_id,
                }
                var url = '/abortMission';
                if (this.cross) {
                    url = '/cross_platform/abortMission'
                }
                await api.request(url, 'post', param).then(() => {
                    this.$toast('放弃成功！');
                    this.$router.push({path: '/'})
                })
            },
            async applySuccess() {
                this.apply = false;
                if (this.applyText.length <= 3) {
                    this.$toast('请正确填写介入理由！字数不得少于三个字');
                    return false;
                }
                let param = {
                    work_id: this.task.work_id,
                    job_id: this.task.job_id,
                    consumer_id: this.task.consumer.consumer_id,
                    content: this.applyText
                }

                await api.request('/works/apply', 'post', param).then(() => {
                    this.$toast('申请介入成功！');
                    this.$router.push({path: '/'})
                })
            },

            titleMessage(title) {
                MessageBox(title)
            },
            async answers(question_id, answer, work_id) {
                let param = {
                    question_id: question_id,
                    answer: answer,
                    work_id: work_id
                }
                let resp = await api.request('/answers', 'post', param);

                if (resp.status == 200) {
                    this.$toast(resp.data.message);
                    this.depth = true;

                    // 验证成功后 存储
                    localStorage.setItem('depth_text', answer)
                    localStorage.setItem('depth_work_id', work_id)
                } else {
                    // 验证失败删除 存储
                    localStorage.removeItem('depth_text')
                    localStorage.removeItem('depth_work_id')
                    this.depth = false;
                }
            },
            handleSuccess(e) {
                this.$toast('复制成功')
            },
            handleError(e) {
                this.$toast('复制失败，此机型不支持微信端复制')
            }
        }
        ,
        mounted() {
            window.addEventListener('scroll', this.handleScroll);
            window.uploadImg = this.uploadImg;
            this.setData()

            window.onbeforeunload = function (event) {
                return '您可能有数据没有保存';
            };
        }
        ,
        computed: {
            /**
             * 上部分已上传数量
             *
             * @returns {*}
             */
            topUploadedCount() {
                return _.filter(this.task.work.items.origin, o => {
                    return o.job_option_group == 1 && o.uploadedImg;
                }).length;
            }
            ,

            /**
             * 上部分总数
             *
             * @returns {*}
             */
            topCount() {
                return _.filter(this.task.work.items.origin, o => o.job_option_group == 1).length;
            }
            ,
            /**
             * 下部分已上传数量
             *
             * @returns {*}
             */
            downUploadedCount() {
                return _.filter(this.task.work.items.origin, o => {
                    return o.job_option_group == 2 && o.uploadedImg;
                }).length;
            }
            ,

            /**
             * 下部分总数
             *
             * @returns {*}
             */
            downCount() {
                return _.filter(this.task.work.items.origin, o => o.job_option_group == 2).length;
            }

        }
        ,
        watch: {
            topUploadedCount(newValue) {
                if (this.task.work.status.val != 5 && this.task.work.status.val != 6) {
                    if (newValue >= this.topCount) {
                        this.send()
                    }
                }
            }
            ,
            exampleUrl(url) {
                if (url) {
                    document.body.setAttribute("style", "overflow:hidden;");
                } else {
                    document.body.setAttribute("style", "overflow:visible;");
                }
            }
        }
    }
</script>
<style>
    .mint-msgbox-message {
        word-break: break-all;
    }

    .detailBanImg {
        position: fixed;
        right: .5rem;
        left: .5rem;
        top: 1rem;
        z-index: 9999;
        border-radius: .3rem;
        overflow: hidden
    }

    .detailBanImg .banner_head img {
        height: auto;
        max-height: 9.5rem;
    }

    #reason {
        background: rgba(0, 0, 0, .3);
        color: #fff;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 999999;
    }

    #reason ul {
        width: 70%;
        margin: 0 auto;
        background: #fff;
        text-align: center;
        border-radius: .3rem;
        overflow: hidden;
        margin-top: 20%

    }

    #reason ul li {
        color: #FF9815;
        border-top: 1px solid #eee;
        padding: .3rem 0;
        font-size: .4rem;
    }

    #reason .reasonTop {
        padding: .6rem 0;
        border: 0;
        color: #000;
    }

    #reason .reasonBottom {
        color: #F84656;
    }

    .endClock {
        position: relative;
    }

    .huise {
        background: #999;
    }

    .W_550 {
        padding: 0 .3rem;
    }

    .remark {
        font-size: .3rem;
        color: #333;
        padding: .3rem .5rem;
        border-radius: .3rem;
        margin-top: .2rem;
    }

    #apply {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, .5);
        margin: auto;
        z-index: 999;
        text-align: center;
        color: #999;
    }

    #apply .applyBody {
        width: 90%;
        height: 12rem;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #fff;
        margin: auto;
        border-radius: .5rem;
        box-shadow: 0 0 .3rem #eee;
    }

    #apply label {
        display: block;
        margin: .2rem 0;
    }

    #apply h3 {
        color: #999;
        font-size: .6rem;
        margin: .5rem 0;
    }

    #apply input, #apply textarea {
        border-radius: .2rem;
        border: 1px solid #999;
        width: 80%;
        display: block;
        margin: 0 auto;
        box-sizing: border-box;
        font-size: .4rem;
        color: #999;
    }

    #apply input {
        padding: .2rem .5rem;
    }

    #apply textarea {
        padding: .2rem .5rem;
        height: 5rem;
        color: #000;
        -webkit-touch-callout: none;
        -webkit-text-size-adjust: none;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        outline: 0;
        -webkit-user-select: auto
    }

    #apply .applyBodyBtn {
        margin-top: 1.5rem;
    }

    #apply .applyBodyBtn button {
        border: 0;
        width: 3rem;
        height: 1rem;
        background: #999;
        border-radius: .2rem;
        margin: .3rem .5rem;
        font-size: .4rem;
        outline: none;
        color: #fff;
    }

    #depth {
        border: 0;
    }

    .answers {
        display: flex;
    }

    .answers > div {
        flex: 1;
    }

    .reward {
        margin: 0;
        font-size: .3rem
    }

    .fixed_color {
        background: #f2f2f2;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
    }

    .custom {
        padding: 0 .3rem;
    }

    .custom li {
        padding: .3rem 0;
        border-top: 1px solid #eee
    }

    .custom li p {
        padding: 0 .4rem;
        font-size: .35rem;
        margin-top: .1rem;
        overflow: hidden;
        width: 90%;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
        line-height: .55rem;
    }

    .custom li h3 {
        position: relative;
        font-size: .45rem;
        font-weight: 400;
        color: #FCA74B;
        padding-left: .4rem;
    }

    .custom li h3 .dilIcon {
        width: .07rem;
        top: .03;
    }

    .custom li h3 span {
        background: #FFEC6C;
        border: 0;
        border-radius: 0.14rem;
        outline: none;
        font-size: 0.34rem;
        padding: 0.07rem 0.35rem;
        color: #000;
    }

    #custom-img li p {
        overflow: visible;
        white-space: normal;
    }

    #custom-img > ul > li {
        border-top: .08rem solid #E5E5E5;
        padding: .3rem;
        margin-top: .2rem;
    }

    #custom-img {
        padding: 0;
    }

    #custom-img .custom-img-up {
        display: flex;
    }

    #custom-img .custom-img-up li {
        flex: 1;
        position: relative;
    }

    #custom-img .custom-img-up li img {
        display: block;
        margin: 0 auto;
        width: 3.5rem;
        height: 3.5rem;
        border: 1px solid #ddd;
        padding: .1rem;
    }

    #custom-img .custom-img-up li span {
        display: block;
        margin-top: .1rem;
        color: #FCA74B;
        text-align: center;
        font-size: .35rem;
    }

    #custom-img .custom-img-up li input {
        opacity: 0;
        width: 100%;
        position: absolute;
        height: 100%;
        z-index: 1;
        left: 0;
        top: 0;
    }
</style>
